<template>
  <div>
    <div class="top">
      <div class="left-top">
        <!-- 工单统计 -->
        <div class="work">
          <div class="title">
            工单统计 <span>{{ start1 }} ~ {{ end1 }}</span>
          </div>
          <div class="content">
            <el-row>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <div class="num">{{ total }}</div>
                  <div class="text">工单总数(个)</div>
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light">
                  <div class="num">{{ completedTotal }}</div>
                  <div class="text">完成总数(个)</div>
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <div class="num">{{ progressTotal }}</div>
                  <div class="text">进行工单(个)</div>
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light">
                  <div class="num">{{ cancelTotal }}</div>
                  <div class="text">取消工单(个)</div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
        <!-- 销售统计 -->
        <div class="sale">
          <div class="title">
            销售统计 <span>{{ start1 }} ~ {{ end1 }}</span>
          </div>
          <div class="content">
            <el-row>
              <el-col :span="12"
                ><div class="grid-content bg-purple">
                  <div class="num">{{ orederCount }}</div>
                  <div class="text">订单量(个)</div>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content bg-purple-light">
                  <div class="num">{{ priceAll }}</div>
                  <div class="text">销售额(万元)</div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
        <!-- 销售数据 -->
        <div class="shuju">
          <div class="title">
            销售数据 <span>{{ start2 }} ~ {{ end2 }}</span>
            <div class="items">
              <div
                @click="itemg(1)"
                class="item"
                :class="{ checkedt: checkeds === 1 }"
              >
                周
              </div>
              <div
                @click="itemg(2)"
                class="item"
                :class="{ checkedt: checkeds === 2 }"
              >
                月
              </div>
              <div
                @click="itemg(3)"
                class="item"
                :class="{ checkedt: checkeds === 3 }"
              >
                年
              </div>
            </div>
          </div>
          <div class="content">
            <div class="left">
              <div class="chart-box" style="height: 270px" ref="chart"></div>
            </div>
            <div class="right">
              <div class="chart-box" style="height: 270px" ref="chartr"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品热榜 -->
      <div class="hot">
        <div class="title">
          商品热榜 <span>{{ start1 }} ~ {{ end1 }}</span>
        </div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in hotlist" :key="index">
              <div>{{ index + 1 }}</div>
              <div>{{ item.skuName }}</div>
              <div>{{ item.count }}单</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom">
      <!-- 合作商 -->
      <div class="partner">
        <div class="title">
          <span>合作商点位数Top5<i class="el-icon-more dian"></i></span>
        </div>
        <div class="right">
          <div class="chart-boxl" style="height: 350px" ref="chartg"></div>
        </div>
        <div class="left">
          <div class="text">
            <h2>{{ point }}</h2>
            <p>位数点</p>
            <h2>{{ hezuos }}</h2>
            <p>合作商</p>
          </div>
        </div>
      </div>
      <div class="abnormal">
        <div class="title">
          <span>异常设备监控<i class="el-icon-more dian"></i></span>
        </div>
        <div class="bottom">
          <img src="@/assets/nodate.png" alt="" />
          <div class="text">
            <p>暂无数据</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getWorkAll,
  getOrderAll,
  getPrice,
  getPriceAll,
  getAearAll,
  getGoodsAll,
  getNodeAll,
  getPointAll,
  getPartnerAll,
  getFaultAll
} from '@/api/user'
import * as echarts from 'echarts'
export default {
  name: 'home-page',
  data() {
    return {
      start: '',
      end: '',
      collectType: 1,
      start1: '',
      end1: '',
      start2: '',
      end2: '',
      topValue: 10,
      total: 0,
      completedTotal: 0,
      progressTotal: 0,
      cancelTotal: 0,
      orederCount: 0,
      priceAll: 0,
      point: null,
      hezuos: null,
      hotlist: [],
      zhe: [],
      zhu: [],
      zhu1() {
        const myChartr = echarts.init(this.$refs.chartr)
        // 绘制图表
        myChartr.setOption({
          title: {
            text: '销售额分布',
            left: 'center'
          },
          tooltip: {},
          xAxis: {
            data: this.zhu.xAxis
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: this.zhu.series
            }
          ]
        })
      },
      zhe1() {
        const myCharts = echarts.init(this.$refs.chart)
        // 绘制图表

        const option1 = {
          title: {
            text: '销售额分布图',
            left: 'center'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: this.zhe.xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.zhe.series,
              type: 'line',
              smooth: true,
              lineStyle: {
                color: 'red'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 0, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 255, 255)'
                  }
                ])
              }
            }
          ]
        }
        option1 && myCharts.setOption(option1, true)
      },
      checkeds: 1,
      partner: []
    }
  },
  methods: {
    async itemg(i) {
      // const startWeek1 = this.$moment().startOf('isoWeek').format('YYYY-MM-DD')
      const createData = this.$moment(this.createTime).format('YYYY-MM-DD')
      const rest = this.$moment().startOf('isoWeek').format('YYYY-MM-DD')
      const restMonth = this.$moment().format('YYYY-MM-01')
      const restYear = this.$moment().format('YYYY-01-01')
      this.checkeds = i
      if (i === 1) {
        this.start2 = rest
        this.end2 = createData
        this.zhe = await getPriceAll(this.collectType, rest, createData)
        this.zhe.series = this.zhe.series.map((item) => {
          return (item * 0.01).toFixed(0)
        })
        this.zhu = await getAearAll(rest, createData)
        this.zhu.series = this.zhu.series.map((item) => {
          return (item * 0.01).toFixed(0)
        })
      } else if (i === 2) {
        this.start2 = restMonth
        this.end2 = createData
        this.zhe = await getPriceAll(this.collectType, restMonth, createData)
        this.zhe.series = this.zhe.series.map((item) => {
          return (item * 0.01).toFixed(0)
        })
        this.zhu = await getAearAll(restMonth, createData)
        this.zhu.series = this.zhu.series.map((item) => {
          return (item * 0.01).toFixed(0)
        })
      } else if (i === 3) {
        this.start2 = restYear
        this.end2 = createData
        this.zhe = await getPriceAll(this.collectType, restYear, createData)
        this.zhe.series = this.zhe.series.map((item) => {
          return (item * 0.01).toFixed(0)
        })
        this.zhu = await getAearAll(restYear, createData)
        this.zhu.series = this.zhu.series.map((item) => {
          return (item * 0.01).toFixed(0)
        })
      }

      this.zhe1()
      this.zhu1()
    }
  },
  async created() {
    await getFaultAll()

    const restMonth = this.$moment(this.createTime).format('YYYY-MM-01')
    const createData = this.$moment(this.createTime).format('YYYY-MM-DD')
    this.start = restMonth + ' 00:00:00'
    this.end = createData + ' 23:59:59'
    this.start1 = restMonth
    this.end1 = createData
    // 工单统计
    const res = await getWorkAll(this.start1, this.end1)
    this.total = res.reduce((sum, item) => sum + item.total, 0)
    this.completedTotal = res.reduce(
      (sum, item) => sum + item.completedTotal,
      0
    )
    this.progressTotal = res.reduce((sum, item) => sum + item.progressTotal, 0)
    this.cancelTotal = res.reduce((sum, item) => sum + item.cancelTotal, 0)
    // 销售统计
    this.orederCount = await getOrderAll(this.start, this.end)
    this.priceAll = await getPrice(this.start, this.end)
    this.priceAll = Math.floor((this.priceAll / 1000000) * 100) / 100
    // 商品热榜
    this.hotlist = await getGoodsAll(this.topValue, this.start1, this.end1)
    // 点位数 合作商数
    this.point = await getPointAll()
    this.hezuos = await getPartnerAll()
  },
  async mounted() {
    const createData = this.$moment(this.createTime).format('YYYY-MM-DD')
    const rest = this.$moment().startOf('isoWeek').format('YYYY-MM-DD')
    const restMonth = this.$moment(this.createTime).format('YYYY-MM-01')

    // // 销售统计
    this.start1 = restMonth
    this.end1 = createData
    this.start2 = rest
    this.end2 = createData
    this.zhe = await getPriceAll(this.collectType, rest, this.end1)
    this.zhu = await getAearAll(rest, this.end1)
    this.partner = await getNodeAll()
    console.log(this.partner)
    this.zhe.series = this.zhe.series.map((item) => {
      return (item * 0.01).toFixed(0)
    })
    this.zhu.series = this.zhu.series.map((item) => {
      return (item * 0.01).toFixed(0)
    })
    const myChartg = echarts.init(this.$refs.chartg)
    const option = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          name: 'Radius Mode',
          type: 'pie',
          radius: [20, 140],
          center: ['50%', '50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          //
          data: this.partner
        }
      ]
    }

    option && myChartg.setOption(option)
    // 基于准备好的dom，初始化echarts实例
    this.zhe1()
    // 基于准备好的dom，初始化echarts实例
    this.zhu1()
  }
}
</script>

<style scoped lang="scss">
.top {
  overflow: hidden;
  .left-top {
    float: left;
    position: relative;
    max-width: 1200px;
    min-height: 540px;
    .work {
      float: left;
      width: 620px;
      height: 166px;
      background-color: #e9f3ff;
      background-image: url('@/assets/home1.png'), url('@/assets/home2.png');
      background-repeat: no-repeat;
      background-position: 0 0, calc(100% - 1px) 100%;
      border-radius: 5%;
      margin-right: 10px;
      .title {
        color: #333333;
        font-size: 16px;
        padding: 20px 0px 20px 20px;
        font-weight: 700;
        span {
          color: #999999;
          font-size: 12px;
          font-weight: 400;
        }
      }
      .content {
        margin-left: 33px;
        .num {
          font-size: 36px;
          color: #072074;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          font-weight: 700;
          margin: 0 !important;
        }
        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-weight: 400;
          color: #91a7dc;
          line-height: 17px;
        }
      }
    }
    .sale {
      float: left;
      width: 540px;
      height: 166px;
      background: #fbefe8 url('@/assets/home3.png') no-repeat calc(100% - 12px)
        100%;
      border-radius: 5%;
      .title {
        color: #333333;
        font-size: 16px;
        padding: 20px 0px 20px 20px;
        font-weight: 700;
        span {
          color: #999999;
          font-size: 12px;
          font-weight: 400;
        }
      }
      .content {
        margin-left: 60px;
        .num {
          font-size: 36px;
          color: #ff5757;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          font-weight: 700;
          margin: 0 !important;
        }
        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-weight: 400;
          color: #ff5757;
          line-height: 17px;
        }
      }
    }
    .shuju {
      float: left;
      padding: 20px;
      // display: flex;
      height: calc(40vh - 68px);
      min-height: 350px;
      margin-top: 20px;
      background: #fff;
      border-radius: 20px;
      width: 1170px;
      .title {
        color: #333333;
        font-size: 16px;
        padding: 0px 0px 20px 20px;
        font-weight: 700;
        span {
          color: #999999;
          font-size: 12px;
          font-weight: 400;
        }
      }
      .checkedt {
        background: #fff;
        box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
        border-radius: 7px;
        font-weight: 600;
        color: #333;
      }
      .items {
        width: 129px;
        height: 34px;
        background: rgba(233, 243, 255, 0.37);
        border-radius: 10px;
        float: right;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 25px;
        .item {
          display: inline-block;
          width: 37px;
          height: 25px;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
        }
      }
      .left {
        float: left;
        width: 500px;
      }
      .right {
        float: right;
        width: 500px;
      }
    }
  }
  .hot {
    float: left;
    width: 330px;
    height: 530px;
    background: #fff;
    .title {
      color: #333333;
      font-size: 16px;
      padding: 20px 0px 20px 20px;
      font-weight: 700;
      span {
        color: #999999;
        font-size: 12px;
        font-weight: 400;
      }
    }
    .content {
      ul {
        li {
          display: flex;
          min-width: 300px;
          margin: 20px 5px;
          div:nth-child(1) {
            display: inline-block;
            width: 20%;
          }
          div:nth-child(2) {
            display: inline-block;
            width: 55%;
          }
          div:nth-child(3) {
            display: inline-block;
            width: 25%;
          }
        }
      }
    }
  }
}

.bottom {
  min-height: 400px;
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  .partner {
    margin-right: 25px;
    padding: 20px;
    float: left;
    width: 920px;
    min-height: 353px;
    background: #fff;
    border-radius: 20px;
    min-height: 400px;

    .title {
      color: #333333;
      font-size: 16px;
      padding: 20px 0px 20px 20px;
      font-weight: 700;
      .dian {
        padding-left: 700px;
      }
    }
    .right {
      margin-left: 50px;
    }
    .left {
      background: #f8f8f9;
      text-align: center;
      padding: 25px 50px 50px 50px;
      margin-left: 120px;
      float: left;
      width: 180px;
      height: 300px;
      h2 {
        margin: 30px 0;
      }
    }
    .chart-boxl {
      float: left;
      width: 450px;
      height: 284px;
    }
  }
  .abnormal {
    padding: 20px;
    float: right;
    width: 585px;
    justify-content: center;
    min-height: 353px;
    background: #fff;
    border-radius: 20px;
    margin-right: 20px;
    .title {
      color: #333333;
      font-size: 16px;
      padding: 20px 0px 20px 20px;
      font-weight: 700;
      .dian {
        padding-left: 400px;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 295px;
    .text {
      p {
        margin-top: 20px;
      }
    }
  }
}
</style>
